<script setup>
import {onMounted, ref} from "vue";
import {createOrg, deleteOrg, listOrg, listOrgTree, updateOrg} from "../../../http/manage/org.js";
import {manageStore} from "../../../stores/counter.js";

const orgTreeFormProps = {
  children: 'children',
  label: 'name',
}

let orgTableTreeData = ref([])

let orgName = ref("")
let orgForm = ref({})
let showOrgForm = ref(false)
let orgUpdate = ref(false)

function showOrgCreate(parentUkId) {
  orgForm.value = {
    parentUkId : parentUkId
  }
  showOrgForm.value = true
  orgUpdate.value = false
}

function showOrgUpdate(org) {
  orgForm.value = org
  showOrgForm.value = true
  orgUpdate.value = true
}

function handleOrgSave() {
  if (orgUpdate.value){
    handleOrgUpdate()
  }else {
    handleOrgCreate()
  }
}

function handleOrgCreate() {
  createOrg(orgForm.value).then(response => {
    handleOrgTreeList(0)
    showOrgForm.value = false
    orgForm.value = {}
  })
}

function handleOrgUpdate() {
  updateOrg(orgForm.value).then(response => {
    handleOrgTreeList(0)
    showOrgForm.value = false
    orgForm.value = {}
  })
}

function handleOrgDelete(org) {
  deleteOrg(org.ukId).then(response => {
    handleOrgTreeList(0)
  })
}

function handleOrgTreeList(parentUkId) {
  listOrgTree(parentUkId).then(response => {
    orgTableTreeData.value = response.data
  })
}

onMounted(() => {
  handleOrgTreeList(0)
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden; padding-left: 5px; padding-right: 5px">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px; padding-left: 5px">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="名称">
          <el-input style="width: 200px" v-model="orgName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleOrgTreeList">查询</el-button>
          <el-button type="primary" @click="showOrgCreate('0')">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        :data="orgTableTreeData"
        style="width: 100%; margin-bottom: 20px"
        row-key="ukId"
        border
        default-expand-all
    >
      <el-table-column prop="name" label="名称" sortable/>
      <el-table-column prop="status" label="状态" width="70">
        <template #default="scope">
          <el-switch
              @change="orgForm = scope.row; handleOrgUpdate()"
              active-value="enable"
              inactive-value="disable"
              v-model="scope.row.status "
          />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="60"/>
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-button @click="showOrgCreate(scope.row.ukId)">
            新建下级
          </el-button>
          <el-button @click="showOrgUpdate(scope.row)">
            编辑
          </el-button>
          <el-popconfirm
              width="170"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleOrgDelete(scope.row)"
              :title="'是否确认删除机构数据 [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="机构管理" v-model="showOrgForm" :close-on-click-modal="false" label-width="80px">
    <el-form ref="form" :model="orgForm" label-width="80px">
      <el-form-item label="上级机构">
        <el-tree-select
            check-strictly=true
            node-key="ukId"
            v-model="orgForm.parentUkId"
            :props="orgTreeFormProps"
            :data="orgTableTreeData"
        />
      </el-form-item>
      <el-form-item label="机构名称">
        <el-input v-model="orgForm.name"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="orgForm.status">
          <el-option
              v-for="item in manageStore().status"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="orgForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="showOrgForm = false; orgForm.value = {}">取消</el-button>
        <el-button type="primary" @click="handleOrgSave">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>

</style>